<template>
  <div class="dashboard-editor-container">
    <div class="button-group">
      <el-button type="primary" @click="changeToDay">日</el-button>
      <el-button type="primary" @click="changeToWeek">周</el-button>
      <el-button type="primary" @click="changeToMonth">月</el-button>
    </div>
    <panel-group :chart-data="report"/>
    <!-- 使用 table 组件并传递数据 -->
    <el-row>
      <TableComponent :table-data="tableData"></TableComponent>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './PanelGroup.vue'
import TableComponent from './table.vue'
import {getThisMonthSales, getThisWeekSales, getTodaySales} from "@/api/jihuo/report";
import {listUser} from "@/api/system/user";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    TableComponent,
  },
  data() {
    return {
      report: {
        totalSales: 0,
      },
      tableData: [], // 定义表格数据
      userList: []
    }
  },
  mounted() {
    Promise.all([
      getTodaySales(),
      listUser({})
    ]).then(([resp, response]) => {
      this.userList = response.rows;
      this.tableData = resp.rows;

      this.tableData.forEach((item) => {
        item.userName = this.userList.find(user => user.userId === item.jhSellClient)?.userName || '未知';
        this.report.totalSales += item.jhPrice;
      });
    });
  },
  methods: {
    changeToWeek() {
      this.resetReport();
      getThisWeekSales().then(resp => {
        this.updateReport(resp);
      });
    },
    changeToMonth() {
      this.resetReport();
      getThisMonthSales().then(resp => {
        this.updateReport(resp);
      });
    },
    changeToDay() {
      this.resetReport();
      getTodaySales().then(resp => {
        this.updateReport(resp);
      });
    },
    resetReport() {
      this.report.successTotal = 0;
      this.report.failTotal = 0;
      this.tableData = [];
    },
    updateReport(resp) {
      this.report.totalSales = 0;
      this.tableData = resp.rows;
      this.tableData.forEach((item) => {
        this.report.totalSales += item.jhPrice;
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .button-group {
    margin-bottom: 20px;
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
